<template>
  <view-box :body-padding-top="paddingTop" :body-padding-bottom="paddingBottom">
    <x-header :left-options="{backText: '',preventGoBack:preventGoBack}" class="vux-header x-top-header" @on-click-back="clickBack">
      {{headTitle}}
    </x-header>
    <slot></slot>
  </view-box>
</template>

<script>
  import {XHeader} from 'vux'

  export default {
    name: 'viewHeader',
    data () {
      return {}
    },
    props: {
      headTitle: String,
      paddingTop: {
        type: String,
        default: '1.2rem'
      },
      paddingBottom: {
        type: String,
        default: '0'
      }, preventGoBack: {
        type: Boolean,
        default: false
      }, clickBack: {
        type: Function,
        default: () => {
          this.$router.go(-1)
        }
      }
    },
    watch: {},
    components: {XHeader},
    computed: {},
    methods: {},
    created () {

    },
    mounted () {

    }
  }
</script>

<style scoped lang="less">
  .vux-header {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    position: fixed;
    z-index: 600;
    left: 0;
    top: 0;
    width: 100%;
    height: 1.20rem;
    line-height: 1.20rem;
  }

  .vux-1px-b:after {
    border-bottom: 0.013333rem solid #ddd;
  }
</style>
